<template>
    <div>
        <div>
        <div class="login-wrap" v-show="showLogin">
            <h3>登录</h3>
            <p v-show="showTishi">{{tishi}}</p>
            <input type="text" placeholder="请输入用户名" v-model="username">
            <input type="password" placeholder="请输入密码" v-model="password">
            <button v-on:click="login">登录</button>
            <span v-on:click="ToRegister">没有账号？马上注册</span>
        </div>

        <div class="register-wrap" v-show="showRegister">
            <h3>注册</h3>
            <p v-show="showTishi">{{tishi}}</p>
            <input type="text" placeholder="请输入用户名" v-model="newUsername">
            <input type="password" placeholder="请输入密码" v-model="newPassword">
            <button v-on:click="login">注册</button>
            <span v-on:click="ToLogin">已有账号？马上登录</span>
        </div>
    </div>

    </div>
</template>

<style>
   .register-wrap>h3,.login-wrap>h3{
	font-size: 1rem;
	color: #ff6900;
}
	 .login-wrap,.register-wrap{text-align:center;}
    input{
    	display:block; 
    	width:70%; 
    	height:1rem; 
    	line-height:1.5rem; 
    	margin:0 auto; 
    	margin-bottom: .1rem; 
    	outline:none; 
    	border:1px solid #888; 
    	padding:.1rem;
    	 box-sizing:border-box;
    	}
    p{color:red;}
    button{display:block;
	    width:70%; 
	    height:1rem; 
	    line-height: 1rem; 
	    margin:0 auto; 
	    border:none;
	    background-color:#41b883;
	    color:#fff; 
	    font-size:16px;
       	margin-bottom:.1rem;
   }
    span{cursor:pointer;}
    span:hover{color:#41b883;}
</style>

<script>
    export default{
        data(){
            return{
                showLogin: true,
                showRegister: false,
                showTishi: false,
                tishi: '',
                username: '',
                password: '',
                newUsername: '',
                newPassword: ''
            }
        },
	  methods:{
	    login(){
	        if(this.username == "" || this.password == ""){
	            alert("请输入用户名或密码")
	        }
	    },
	    ToRegister(){
			    this.showRegister = true
			    this.showLogin = false
			},
			ToLogin(){
			    this.showRegister = false
			    this.showLogin = true
			}
	  }
    }
</script>